.br-alert{
    position: relative;
    clear: both;
    border-radius: 3px;
    padding: 0px $alert-right 0px $alert-segments;
    margin-bottom: $space-of-segments;
    vertical-align: middle;
    /** 普通尺寸*/
    &--normal{
      padding: $base-gap-of-x $alert-right $base-gap-of-x $alert-segments;
      &__title{
        font-size: $alert-text;
        color: $alert-text-color;
      }
    }
    /** 带辅助性文字*/
    &--large{
      color: $text-color;
      padding: 14px $alert-right 14px $alert-segments ;
      &__title{
        display: block;
        font-size: $alert-normal-icon;
        color: $text-color;
        font-weight: bold;
        margin-bottom: $base-gap-of-y;
      }
      &__description{
        color: $alert-description;
        display: block;
        position: relative;
        font-size: $alert-text;
        &.right{
          margin-left: 32px;
        }
      }
    }
    /** type为success背景颜色*/
    &--success {
      border: 1px solid #b8e49b;
      background-color: #f5feed;
    }
    /** info背景颜色*/
    &--info{
      border: 1px solid #9fdaff;
      background-color: #ebf9ff;
    }
    /** warning背景颜色*/
    &--warning{
      border: 1px solid #ffd29e;
      background-color: #fff9ed;
    }
    /** error背景颜色*/
    &--error{
      border: 1px solid #ffbfbb;
      background-color: #fff7f7;
    }

    /** 图标样式*/
    &__icon{
      float: left;
      margin-right: $base-gap-of-x;
      &--success{
        color: #53c835;
      }
      &--info{
        color: #1895ff;
      }
      &--warning{
        color: #ffa303;
      }
      &--error{
        color: #eb3e41;
      }
      &--normal{
        line-height: 18px;
        ::before{
        font-size: $alert-normal-icon;
        }
      }
      &--large{
        line-height: 21px;
        ::before{
        font-size: $alert-large-icon;
        }
      }
    }
    /** 关闭图标 */
    &__close {
      position: absolute;
      right: $alert-segments;
      top:$base-gap-of-x;
      font-size: $alert-close-icon;
      cursor: pointer;
      color: $icon-gray-color;
      &:hover{
        color: $primary-color;
      }
    }
}
